/**
 * 讲师管理组件
 * 当这个组件出现里，就要去获取数据了!
 */
import React from 'react'
import axios from 'axios'
import TecModal from './TecModal.js'
import $ from 'jquery'
import Bt from 'bootstrap'

// import $ from 'jquery'
export default class TecMange extends React.Component{
  constructor(){
    super()
    this.state = {
      list:[],

      // 存储要查看的讲师的信息!
      tec:{}
    }
  }
  componentWillMount(){
    axios.get('/api/teacher')
    .then((res) => {
        console.log(res)
        this.state.list = res.data.result
        this.setState({})
    })
    // alert(123)
    // $.ajax({
    //   url:'/api/teacher',
    //   type:'get',
    //   success:function (data) {
    //     console.log(data)
    //   }
    // })
  }
  componentDidMount(){

  }
  render(){
    return(
      <div className="body teacher-list">
      {
        // 模态框
      }
        <TecModal tec={this.state.tec}></TecModal>
        <ol className="breadcrumb">
          <li><a href="javascript:;">讲师管理</a></li>
          <li className="active">讲师列表</li>
        </ol>
        <div className="page-title">
          <a href="./teacher_add.html" className="btn btn-success btn-sm pull-right">添加讲师</a>
        </div>
        <div className="panel panel-default">
          <div className="panel-body">
            <form action="" className="form-inline">
              <div className="input-group">
                <input type="text" className="form-control input-sm" />
                <span className="input-group-btn">
                  <button className="btn btn-success btn-sm">搜索</button>
                </span>
              </div>
            </form>

          </div>
          <table className="table table-striped table-bordered table-hover">
            <thead>
              <tr>
                <th>编号</th>
                <th>姓名</th>
                <th>昵称</th>
                <th>年龄</th>
                <th>性别</th>
                <th>手机号码</th>
                <th>操作</th>
              </tr>
            </thead>
            <tbody>
              {this.state.list.map((item)=>{
                return (
                <tr key={item.tc_id}>
                <td>{item.id}</td>
                <td>{item.tc_name}</td>
                <td>{item.tc_roster}</td>
                <td>{item.tc_age}</td>
                <td>{item.tc_gender}</td>
                <td>{item.tc_cellphone}</td>
                <td>
                  <button data-toggle="modal" className="btn btn-info btn-xs"
                   onClick={this.watch.bind(this,item.tc_id)}>查 看</button>
                  {
                    // 当点击编辑的时候，要进行到编辑页面
                  }
                  <a href={'#/TecEdit/' + item.tc_id} className="btn btn-info btn-xs">编 辑</a>
                  <a href="javascript::" className="btn btn-warning btn-xs">注 销</a>
                </td>
              </tr>
                  )
              })}
            </tbody>
          </table>
        </div>
      </div>)
  }

  // 查看讲师的详情
  // 要弹出模态框查看!
  watch(id){
    // 弹出模态框,
    // 获取讲师信息
    // 要把讲师的信息传递给TecModal// 父组件往子组件传值!
    $('#teacherModal').modal('show')
    // http://api.botue.com/teacher/view
    axios.get('/api/teacher/view?tc_id='+id)
    .then((res) => {
        this.state.tec = res.data.result
        this.setState({})
    })

  }
}